<template>
    <div class="msg_container">
        <el-form :model="phoneData" :rules="phoneRules" ref="phoneFormRef">
            <el-form-item>
                <el-col :span="24">
                    <h2>绑定手机</h2>
                </el-col>
            </el-form-item>
            <el-form-item label-width="120px" label="绑定手机 :" prop="phoneNumber">
                <el-col :span="12">
                    <el-input v-model="phoneData.phoneNumber" placeholder="请输入手机号码"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label-width="120px" label="验证码 :" prop="code">
                <el-col :span="8">
                    <el-input v-model="phoneData.code" placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="4">
                    <div class="phone_code">
                        <button 
                            type="button" 
                            :disabled="phoneCodeDisabled" 
                            @click="getPhoneCode" 
                            class="code"
                            >
                            {{ getPhoneText }}</button>
                    </div>
                </el-col>
            </el-form-item>
            <el-form-item label-width="120px" label="">
                <el-col :span="12">
                    <button type="button" class="submit_btn" @click="phoneSubmitForm">提交</button>
                </el-col>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { sendSmsForLogin } from '../../../api/login'
import { bindPhone } from '../../../api/user'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../../store/user';
const { userState,setUsername,setToken  } = useUserStore();
// let phoneData = ref('')
let emailData = ref('')
let getPhoneText = ref('获取验证码')          // 倒计时显示读秒
let second = 60                             // 倒计时秒数
let timer = null                            // 倒计时setInterval
let phoneCodeDisabled = ref(false)
const phoneFormRef = ref(null)
const phoneData = reactive({
    phoneNumber: '',
    code: ''
})

function resetphoneData() {
    phoneData.phoneNumber = ''
    phoneData.code = ''
}

if (userState.tel) {
    phoneData.phoneNumber = userState.tel
}

// 绑定手机
function phoneSubmitForm() {
    phoneFormRef.value.validate((valid) => {
        if (valid) {
            bindPhone(phoneData).then(res => {
                if (res.status === 200) {
                    
                    if (res.data.status === 500) {
                        ElMessage({
                            message: '手机号已绑定，请更换手机号重新绑定',
                            type: 'error',
                            duration: 5 * 1000
                        })
                    }

                    if (res.data.status === 401) {
                        ElMessage({
                            message: '验证码输入有误',
                            type: 'error',
                            duration: 5 * 1000
                        })
                    }

                    if(res.data.status === 200 ) {
                        ElMessage({
                            message: '绑定成功',
                            type: 'success',
                            duration: 3 * 1000
                        })
                        resetphoneData()
                    } 
                    
                } else {

                }
            })
        }
    })
}


// 获取验证码
function getPhoneCode() {
    phoneFormRef.value.validateField('phoneNumber', (valid) => {
        console.log(valid)
        // toLogin()
        if (valid) {
            phoneCodeDisabled.value = true
            second-- 
            getPhoneText.value = second+'秒后重新发送'
            timer = setInterval(() =>{
                second-- 
                getPhoneText.value = second+'秒后重新发送'
                if (second<=0) {
                    getPhoneText.value = '获取验证码'
                    second = 10
                    phoneCodeDisabled.value = false
                    clearInterval(timer)
                }
            },1000)


            sendSmsForLogin({
                phoneNumber: phoneData.phoneNumber
            }).then(res => {
                
            }).catch( error => {
                loginLoading.close()
            })
        }
    })
}

// 验证码登录校验
const phoneRules = {
    phoneNumber: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^[1][3-9][0-9]{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
}
</script>

<style scoped>
.submit_btn {
    width: 200px;
    height: 40px;
    line-height: 42px;
    text-align: center;
    color: #FFF;
    background-color: #e13f79;
    font-size: 18px;
    border-radius: 5px;
  }

.phone_code {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.phone_code button {
    width: 95%;
    min-width: 130px;
    height: 50px;
    line-height: 42px;
    text-align: center;
    color: #FFF;
    background-color: #e13f79;
    font-size: 18px;
    border-radius: 5px;
    margin-left: 10px;
}
</style>